<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="$router.back()" />
    </header>
    <main class="content">
      <div class="sidebar" >
        <van-sidebar class="left" v-model="active" @change="onChange">
  <van-sidebar-item title="手机数码" />
  <van-sidebar-item title="礼品鲜花" />
  <van-sidebar-item title="服装" />
</van-sidebar>
<ul>
  <div class="right">
    <li v-for="item in list" :key="item.id">
    <img :src="item.image" alt="">
<div class="van-multi-ellipsis--l2">{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
  </div>
 
</ul>
      </div>
  
    </main>
  </div>
</template>

<script setup>
// ["手机数码","礼品鲜花","服装"]

const active=ref(0)
import {ref,onMounted} from 'vue'
 import request from '@/tool/request'
 const list=ref([])
 const onChange=(index)=>{
  const arr=['手机数码','礼品鲜花','服装']
  request.get('/kind',{
    params:{
      key:arr[index]
    }
  }).then(res=>{
    if(res.data.code==200){
      list.value=res.data.data
    }
  })
 }
 onMounted(()=>{
  onChange(0)
 })
</script>

<style lang="scss" scoped>
.sidebar{
  display: flex;
  .left{
    position: fixed;
  }
  .right{
    display: flex;
    flex-wrap: wrap;
    margin-left: 100px;
   li{
    width: 30%;
    margin: 0.8%;
   }
  }
}
</style>